<template>
	<div>
		<div class="plate_head">
			<h1>帖子管理</h1>
			<span>帖子名称</span>
			<input type="text" v-model="title">
			<Button type="primary" id="search" @click="getPages(1,10,title)">查询</Button>
			<Button type="primary" id="search_all" @click="getPages()">查询所有</Button>
		</div>
		<Table :columns="PageCol" :data="pages.records">
		
		</Table>
		<Row class="page_choose">
			<Col>
				<Page @on-change="changePage" @on-page-size-change="changepageSize" :total="pages.total"
				      :current="pages.current" :page-size="pages.size"
				      show-sizer show-elevator/>
			</Col>
		</Row>
		<div>
			<Drawer :closable="false" width="940" v-model="showRemark">
				<div id="remarks">
					<Table border ref="selection" :columns="RemarkCol" :data="remarks.records">
						<template slot-scope="{ row, index }" slot="action">
							<Button type="error" size="small" @click="remove_remark(index)">Delete</Button>
						</template>
					</Table>
					<Button @click="handleSelectAll(true)">全部选择</Button>
					<Button @click="handleSelectAll(false)">取消全选</Button>
				</div>
			</Drawer>
		</div>
	</div>
</template>
<script>
	import {mapActions, mapGetters} from 'vuex'
	
	export default {
		data() {
			return {
				showRemark: false,
				pages: {},
				userCache:new Map(),
				plateCache:new Map(),
				remarks: {},
				title: null,
				pStyle: {
					fontSize: '16px',
					color: 'rgba(0,0,0,0.85)',
					lineHeight: '24px',
					display: 'block',
					marginBottom: '16px'
				},
				PageCol: [
					{
						title: '标题',
						key: 'title',
						render: (h, params) => {
							return h('div', [
								h('title', {
									props: {
										type: 'person'
									}
								}),
								h('a',{attrs:{href:"/page/" + params.row.id}}, params.row.title)
							]);
						}
					},
					{
						title: '所属用户',
						key: 'user'
					},
					{
						title: '所属板块',
						key: 'plate'
					},
					{
						title: '操作',
						key: 'action',
						width: 300,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.showRemark = true;
											this.getRemarks(params.index);
										}
									}
								}, '所有评论'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
											this.remove(params.index)
										}
									}
								}, '删除帖子')
							]);
						}
					}
				],
				RemarkCol: [
					{
						type: 'selection',
						width: 60,
						align: 'center'
					},
					{
						title: '用户名',
						width: 120,
						key: 'user'
					},
					{
						title: '评论',
						key: 'content'
					},
					{
						title: '操作',
						slot: 'action',
						width: 150,
						align: 'center'
					}
				],
			}
		},
		methods: {
			...mapActions('adminPage', ["getAllPage", "deletePage"]),
			...mapActions('adminUser', ["getUser"]),
			...mapActions('adminPlate', ["getPlate"]),
			...mapActions('adminRemark', ["getAllRemark", "deleteRemark"]),
			remove(index) {
				this.deletePage({
					id: this.pages.records[index].id,
					callback: success => {
						if (success) {
							this.pages.records.splice(index, 1);
							this.$Message.success("删除成功");
						} else
							this.$Message.error("删除失败");
					}
				})
			},
			remove_remark(index) {
				this.deleteRemark({
					id: this.remarks.records[index].id,
					callback: success => {
						if (success) {
							this.remarks.records.splice(index, 1);
							this.$Message.success("删除成功");
						} else
							this.$Message.error("删除失败");
					}
				})
			},
			handleSelectAll(status) {
				this.$refs.selection.selectAll(status);
			},
			remove_allRemark(index) {
				this.deleteRemark({
					id: this.remarks.records[index].id,
					callback: success => {
						this.remarks.records.splice(index, 1);
					}
				})
			},
			changePage: function (page) {
				this.getPages(page, this.pages.size)
			},
			changepageSize: function (size) {
			},
			getRemarks: function (index, page = 1, size = 10) {
				this.getAllRemark({
					pageId: this.pages.records[index].id,
					page, size,
					callback: rs => {
						this.remarks = rs.remarks;
						let stack = [];
						this.remarks.records.forEach(r => {
							stack.push(r);
						})
						
						this.setUser(stack);
					}
				})
			},
			getPages: function (page = 1, size = 10, title = null) {
				if (title) {
					title = `%${title}%`;
				}
				
				this.getAllPage({
					page, size, title,
					callback: pages => {
						this.pages = pages;
						let userStack = [];
						let plateStack = [];
						pages.records.forEach(x => {
							userStack.push(x);
							plateStack.push(x);
							// this.getUser({
							// 	id: x.userId,
							// 	callback: u => {
							// 		this.$set(x, 'user', u.user.username);
							// 	}
							// })
							
							// this.getPlate({
							// 	id: x.plateId,
							// 	callback: p => {
							// 		this.$set(x, 'plate', p.plate.name);
							// 	}
							// })
						})
						
						this.setUser(userStack);
						this.setPlate(plateStack);
						// for (const key in pages) {
						// 	this.$set(this.pages,key, pages[key]);
						// }
					}
				});
			},
			setUser(stack) {
				let userCache = this.userCache
				let data = stack.pop();
				if (!data) {
					return;
				}
				if (userCache.get(data.userId)) {
					this.$set(data, 'user', userCache.get(data.userId).username);
					this.setUser(stack);
					return;
				}
				
				this.getUser({
					id: data.userId,
					callback: u => {
						userCache.set(u.user.id, u.user);
						this.$set(data, 'user', u.user.username);
						this.setUser(stack);
					}
				});
			},
			setPlate(stack) {
				let plateCache = this.plateCache
				let data = stack.pop();
				if (!data) {
					return;
				}
				if (plateCache.get(data.plateId)) {
					this.$set(data, 'plate', plateCache.get(data.plateId).name);
					this.setPlate(stack);
					return;
				}
				
				this.getPlate({
					id: data.plateId,
					callback: p => {
						plateCache.set(p.plate.id, p.plate);
						this.$set(data, 'plate', p.plate.name);
						this.setPlate(stack);
					}
				});
			},
			
		},
		created: function () {
			this.getPages();
		},
	}

</script>
<style>
	.demo-drawer-profile {
		font-size: 14px;
	}
	
	.demo-drawer-profile .ivu-col {
		margin-bottom: 12px;
	}
	
	.plate_head {
		margin-bottom: 20px;
	}
	
	.plate_head span {
		font-size: 14px;
	}
	
	.plate_head input {
		height: 36px;
		width: 400px;
		margin: 0 20px;
		border: 1px solid #000000;
		font-size: 18px;
		text-indent: 1em;
		border-radius: 6px;
		outline: unset;
	}
	
	.plate_head button {
		margin: 0 2px;
	}
	
	#remarks button {
		margin: 0 5px;
	}
	
	#remarks button:nth-child(2), #remarks button:nth-child(3), #remarks button:nth-child(4) {
		margin-top: 10px;
	}
</style>
